<template>
	<m-layout title="商品评价" gap="16 20">
		<template v-for="(item,index) in listArr">
			<m-block gap="30" spa="0 0 16 0" class="rvaluate-u">
				<view class="user flex-between">
					<view class="left-user flex">
						<m-image :src="item.headpic" types="user"></m-image>
						<view class="right">
							<text>{{item.nickname}}</text>
							<view class="flex">
								<template v-for=" item3 in  item.gvalue">
									<m-icon size="18" color="#FFAA01" type="icon-shoucangxuanzhong"></m-icon>
								</template>
							</view>
						</view>
					</view>
					<view class="right-time">
						<text>{{item.commentTime}}</text>
					</view>
				</view>
				<view class="centent">
					<text>{{item.content}}</text>
				</view>
				<view class="img-box" v-if="item.picurl">
					<template v-for="cItem2 in item.picurl.split(',')">
						<image :src="cItem2" mode=""></image>
					</template>
				</view>
			</m-block>
		</template>
		<m-empty :loading="isLoading" :list="listArr"></m-empty>
	</m-layout>
</template>

<script>
	import { CommentByGoods } from '@/api/Goods.js'
	export default {
		data() {
			return {
				goodsCode: '',
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: false,
			};

		},
		watch: {
			tabIdx() {
				this.reset()
			},
		},
		onLoad({ goodsId }) {
			this.goodsId = goodsId;
			this.getData();
		},
		methods: {
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { data, list, pageCount } = await CommentByGoods({
					gid: this.goodsId,
					goodsCode: this.goodsCode,
					pageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.rvaluate-u {
		padding-top: 25rpx;

		.user {
			.left-user {
				image {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
				}

				.right {
					padding-left: 20rpx;

					text {
						display: block;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						padding-bottom: 8rpx;
					}
				}
			}

			.right-time {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

		}

		.centent {
			padding-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.img-box {
			padding-top: 20rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-gap: 15rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>